<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui">
<f:view>
<head>
	<link rel="StyleSheet" type="text/css" href="style/estilo.css" media="screen" />
	<p:resources />
	<title>
		<ui:insert name="pageTitle">
			<h:outputText value="Thermo Search"/>
		</ui:insert>
	</title>
</head>
<body>
	<div id="base">
		<div id="meio">
			<p:tabView effect="opacity" effectDuration="normal">
				<p:tab title="Search">
					<h:form>		
						<h:inputText style="width: 88%" value="#{searchBean.mainQuery}"/>
						<h:outputText value="  "/>
						<p:commandButton value="Search" ajax="false" action="#{searchBean.search}"/>
						<p:accordionPanel collapsible="true" effect="opacity">
							<p:tab title="Advance Options">
								<div style="width: 40%; float: left;">
									<strong><h:outputLabel value="Optimal Growth Temperature:" /></strong>
									<f:verbatim>
										<br />
										<br />
									</f:verbatim>
									<h:outputText value="	Higher than " />
									<h:inputText style="width: 40px" />
									<h:outputText value=" °C" />
									<f:verbatim>
										<br />
									</f:verbatim>
									<h:outputText value="	Lower than " />
									<h:inputText style="width: 40px" />
									<h:outputText value=" °C" />
								</div>
								<div style="width: 60%; float: left;">
									<h:panelGrid columns="2" cellspacing="10">
										<h:outputLabel value="Organism Domain:" />
										<h:selectManyCheckbox>
											<f:selectItem itemLabel="Archaea" itemValue="Archaea"/>
											<f:selectItem itemLabel="Bacteria" itemValue="Bacteria"/>
										</h:selectManyCheckbox>
										<h:outputLabel value="Organism Name: " />
										<h:inputText />
									</h:panelGrid>
								</div>
								<div style="clear: both"></div>
								<f:verbatim>
									<br />
								</f:verbatim>
								<strong><h:outputLabel value="Filter by Property" /></strong>
								<f:verbatim>
									<br />
									<br />
								</f:verbatim>
								<p:commandButton value="Remove"/>
								<strong><h:outputText value="GC content: "/></strong>
								<h:outputText value="Higher than " />
								<h:inputText style="width: 40px" />
								<h:outputText value=" % and lower than " />
								<h:inputText style="width: 40px" />
								<h:outputText value=" %." />
								<f:verbatim>
									<br />
								</f:verbatim>
								<p:commandButton value="Remove"/>
								<strong><h:outputText value="(E+K) / (Q+H): "/></strong>
								<h:outputText value="Higher than " />
								<h:inputText style="width: 40px" />
								<h:outputText value=" and lower than " />
								<h:inputText style="width: 40px" />
								<h:outputText value=" ." />
								<f:verbatim>
									<br />
								</f:verbatim>
								<p:commandButton value="Add Property"/>
								<p align="right">
									<p:commandButton value="Search" action="#{searchBean.advancedSearch}"/>
								</p>
							</p:tab>
						</p:accordionPanel>
					</h:form>
				</p:tab>
				<p:tab title="Statistics">
					<h:form>
					<p style="text-align: justify">You can determine the correlation between a given property and the Optimal Growth Temperature or between two different properties.</p>
					<h:panelGrid columns="2" cellspacing="20">
						<h:outputLabel value="X Axis: "/>
						<h:selectOneMenu style="width: 530px">
							<f:selectItem itemValue="teste" itemLabel="Ratio of charged residues"/>
						</h:selectOneMenu>
						<h:outputLabel value=" "/>
						<h:panelGroup>
							<h:outputText value="Restrict limits from " />
							<h:inputText style="width: 40px" />
							<h:outputText value=" % to " />
							<h:inputText style="width: 40px" />
							<h:outputText value=" %." />
						</h:panelGroup>
						<h:outputLabel value="Y Axis: "/>
						<h:selectOneMenu style="width: 530px">
							<f:selectItem itemValue="teste" itemLabel="Optimal Growth Temperature"/>
						</h:selectOneMenu>
						<h:outputLabel value=" "/>
						<h:panelGroup>
							<h:outputText value="Restrict limits from " />
							<h:inputText style="width: 40px" />
							<h:outputText value=" °C to " />
							<h:inputText style="width: 40px" />
							<h:outputText value=" °C." />
						</h:panelGroup>
					</h:panelGrid>
					<p:commandButton value="Plot Graphic" action="#{statisticsBean.plotGraphic}" />
					</h:form>
				</p:tab>
				<p:tab title="Custom Data">
				</p:tab>
				<p:tab title="About">
				</p:tab>
			</p:tabView>
		</div>	
	</div>
</body>
</f:view>
</html>